import React from 'react'
import { connect } from 'mirrorx'
import Title from 'component/title'
import {Picker, List} from 'antd-mobile'
import Trial from '../../trial'

class App extends React.Component {
  getTrialItem (item = {}, index) {
    const {step, initInfo = {}} = this.props
    const { getFieldProps } = this.props.form

    item.list = item.list || []
    let listData = item.list.map((cItem) => {
      return {
        label: cItem.name,
        value: cItem.id
      }
    })

    let keycode = item.key
    let initValue = initInfo[keycode] || (item.list[0] && item.list[0].id)
    if (initValue) {
      if (!T.isArray(initValue)) {
        initValue = [initValue]
      }
    }

    let dom = <Picker
      // extra='请选择'
      data={listData}
      title={item.name} cols={1}
      {...getFieldProps(keycode, {
        initialValue: initValue
      })}
      disabled={step !== 1}
      onOk={value => this.selectChange(item.key, value)}
      onDismiss={e => console.log('dismiss', e)}
    >
      <List.Item arrow='horizontal'>{item.name}</List.Item>
    </Picker>
    return (
      <div key={index} className='bor-bottom'>{dom}</div>
    )
  }

  selectChange (key, value) {
    Trial.trialPrice(key, value[0], (price) => {
      let changePrice = this.props.changePrice
      changePrice && changePrice(price)
    })
  }

  render () {
    const {data = []} = this.props

    if (!data.length) {
      return null
    }

    return (
      <div className='mb50'>
        <Title title='Security information' step={this.props.step} />
        <div className='section-content'>
          {data.map((item, index) => {
            return this.getTrialItem(item, index)
          })}
        </div>
      </div>

    )
  }
}

export default connect(state => {
  return {initInfo: state.insureModel.initInfo}
})(App)
